博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序学习整理
阅读量:5315 次
发布时间:2019-06-14

本文共 6774 字,大约阅读时间需要 22 分钟。

1. 微信小程序 wx.request方法的异步封装实例详解

  wx-promise-request 是对微信小程序 wx.request 方法的异步封装。

  解决问题:

  支持Promise(es6-promise)。管理请求队列,解决 request 最大并发数超过 10 会报错的问题。

  下载:npm install wx-promise-request

  然后拷贝 dist/index.js 文件到你的小程序项目中。 

1 import {request} from './wx-promise-request'; 2 request({ 3  url: 'test.php', 4  data: { 5   x: '', 6   y: '', 7  }, 8  header: { 9   'content-type': 'application/json',10  },11 })12 .then(res => console.log(res))13 .catch(error => console.error(error))
View Code

  API

  setConfig(object)

  通过 setConfig 配置 wx-promise-request,如:使用 qcloud 提供的 request 方法;使用其他 Promise 库等等。

1 import {request, setConfig} from './wx-promise-request'; 2 import qcloud from './vendor/qcloud-weapp-client-sdk/index'; 3 import Promise from 'bluebird'; 4   5 setConfig({ 6   request: qcloud.request, 7   Promise, 8 }) 9 request({10  url: 'test.php',11 })12 .then(res => console.log(res))13 .catch(error => console.log(error));
View Code

 

2. 页面跳转(传参)

跳转到新页面
在当前页打开

  index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.

  navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

1 获取参数:2 Page({    3   onLoad: function(options) {    4     this.setData({    5       title: options.title    6     })    7   }    8 })

 小程序跳转、请求、带参数请求小例子: 

* wx.request(OBJECT)

wx.request发起的是 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接。 

1 //当页面加载时,请求后台数据,并赋值给前台显示 2 Page({ 3     data:{ 4         new_list:[] 5     }, 6     onLoad:function(){ 7         var that = this; 8         wx.request({ 9             url:'http://wxcms.com/getList',10             header:{11                 'content-type':'application/json',12             },13             success:function(res)14             {15                 //将请求的后台数据赋值new_list16                 that.setData({17                     new_list:res.data,18                 })19             }20         })21     }22 })
View Code

*wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wxml:

1 
2
3
4
5
6
7
{
{title}}
8
{
{time}}
9
10
View Code

js:

1 Page({ 2     data:{ 3         new_list:[] 4     }, 5     detial:function(event){ 6         //带id跳转到指定的页面,这里的event.target.dataset.id是获取wxml页面上的data-id参数,详见事件说明 7         wx.navigateTo({ 8             url:"../../pages/detail/detail?id="+event.target.dataset.id 9         })10     }11  })
View Code

*带参数的wx.request(OBJECT)

上述代码跳转到指定页面后:

1 Page({ 2     data:{ 3         info:{} 4     }, 5     //res对象包含了跳转页面中的id参数,再页面加载时,获取id参数然后向后台请求参数,并赋值 6     onLoad:function(res) 7     {    8         var that = this; 9         wx.request({10             url:"http://wxcms.com/getOne",11             //这里是 12             data:{13                 id:res.id,14             },15             header:{16                 'content-type':'application/json'17             },18             success:function(msg)19             {20                 that.setData({21                     info:msg.data,22                 })23             }24         })25     }26 })
View Code

 3.

 

1 // wxml: 2 
3
4 </view> 5
6 7 // js: 8 Page({ 9 data:{10 textdata:"put value",11 12 },13 RequestData:function(){14 var that=this;15 wx.request({16 url: 'https://baidu.com',17 data: {},18 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT19 // header: {}, // 设置请求的 header20 success: function(res){21 that.setData({textdata:res.data});22 console.log(res.data);23 },24 fail: function() {25 // fail26 },27 complete: function() {28 // complete29 }30 })31 }32 })
View Code

 4.关于小程序登录时获取openId和unionId(来源:https://blog.csdn.net/qq_38316918/article/details/78343128) 

目前的项目是在做小程序这方面的,接触过的人应该都知道,同一个微信开放平台下的相同主体的App、公众号、小程序的unionid是相同的,这样就可以锁定是不是同一个用户。微信针对不同的用户在不同的应用下都有唯一的一个openId, 但是要想确定用户是不是同一个用户,就需要靠unionid来区分。一般自己的后台都会有自己的一个用户表,每个用户有不同的userid。也就是说同一个用户在同一个微信开放平台下的相同主体的应用对应着相同的userid,unionid以及不同的openid。所以在用户登录进来的时候,我们只能靠微信返回给我们的unionid去判断是不是同一个用户,在去关联我们的用户表,拿到对应的userid。接下来就是在获取unionid时的一些小问题分享一下:首先,前端调用wx.login的时候会返回一个code,这个code传到后台的时候,就需要去调用微信的接口(https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code)传入 code,appid,secret去换取到openid,session_key以及unionid等信息。这里就需要注意了。官方文档上说的是如果用户已经关注公众号,或者曾经登录过App或公众号,则用户打开小程序时,开发者可以直接通过wx.login获取到该用户UnionID,无须用户再次授权。就是因为没有注意到这句话,所以后来改了好多东西,这里分为两种情况,(1)用code换取的时候,返回了unionid,这样就皆大欢喜了,你可以根据unionid以及openid去判断该用户有没有用户信息,从而获取userid或者生产userid返回给前端(2)悲剧的情况,unionid返回为null,这时候你没法儿关联出用户的userid。后来再去看官方文档的时候,发现有针对这种情况的方法。就是需要前端再去调wx.getUserInfo()这个接口。这时候微信会返回很多数据(详情见微信官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html),这些数据里面有一个encryptedData,这个数据中就包含你需要的unionid以及其他的很多用户信息啦。获取到以后将encryptedData、加密算法的初始向量iv返回给后端,后端根据这两个数据以及之前的session_key就可以解密出你需要的数据了。
View Code

 5.

1 windows下开启方法: 2 1: 首先检查php.ini中;extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘;’, 如果不存在这行,那么添加extension=php_openssl.dll。 3  4 2: 讲php文件夹下的: php_openssl.dll, ssleay32.dll, libeay32.dll 3个文件拷贝到 WINDOWS\system32\ 文件夹下。 5  6 3:如果没有 php_openssl.dll ,点击下载 php_openssl.dll 7  8 下载下来有很多个php_openssl,找到你相应php版本下面的php_openssl。 9 10 查看php版本可以用如下代码:11 
14 找到相应版本之后,按照上面讲的第二步来就可以了。15 16 4: 重启apache或者iis17 18 至此,openssl功能就开启了。19 Linux下开启方法:20 我使用的是阿里云ECS,PHP版本:php-5.5.721 22 下面方案就以我的主机为例讲解为PHP添加openssl模块支持。23 24 网上一些答案说要重新编译PHP,添加configure参数,增加openssl的支持。这里讲一个不需要重新编译的方法。25 26 如果服务器上存在PHP安装包文件最好,如果已经删除,去下载和phpinfo页面显示版本一样的PHP安装文件,我这里是 php-5.5.7.tar.gz27 28 推荐去搜狐镜像下载,网易镜像没有找到。地址为: http://mirrors.sohu.com/php/29 30 用ssh工具连接到主机。31 32 # 下载到/var/www/php5目录下33 34 cd /var/www/php535 36 wget http://mirrors.sohu.com/php/php-5.5.7.tar.gz37 38 # 解压39 40 tar zxvf php-5.5.7.tar.gz41 42 # 进入PHP的openssl扩展模块目录43 44 cd php-5.5.7/ext/openssl/45 46 /var/www/php5/bin/phpize # 这里为你自己的phpize路径,如果找不到,使用whereis phpize查找47 48 # 执行后,发现错误 无法找到config.m4 ,config0.m4就是config.m4。直接重命名49 50 mv config0.m4 config.m451 52 /var/www/php5/bin/phpize53 54 ./configure --with-openssl --with-php-config=/var/www/php5/bin/php-config55 56 make57 58 make install59 60 # 安装完成后,会返回一个.so文件(openssl.so)的目录。在此目录下把openssl.so 文件拷贝到你在php.ini 中指定的 extension_dir 下(在php.ini文件中查找:extension_dir =),我这里的目录是 var/www/php5/lib/php/extensions61 62 # 编辑php.ini文件,在文件最后添加63 64 extension=openssl.so65 66 # 重启Apache即可67 68 /usr/local/apache2/bin/apachectl restart
View Code

 

6.微信小程序客户端腾讯云增强 SDK   --- 使用方法:

https://www.npmjs.com/package/wafer2-client-sdk

转载于:https://www.cnblogs.com/wsybky/p/9069982.html

你可能感兴趣的文章
字符串(AC自动机):HDU 5129 Yong Zheng's Death
查看>>
最详细的排序解析,理解七大排序
查看>>
mybatis模糊查询不同写法
查看>>
Linux移植之内核启动过程引导阶段分析
查看>>
辉光UIView的category
查看>>
整理ASP.NET MVC 5各种错误请求[401,403,404,500]的拦截及自定义页面处理实例
查看>>
luogu4389 付公主的背包
查看>>
C++设计模式之工厂模式(1)
查看>>
MySQL数据库入门到高薪培训教程(从MySQL 5.7 到 MySQL 8.0)
查看>>
Java快速入门-01-基础篇
查看>>
XML与web开发-01- 在页面显示和 XML DOM 解析
查看>>
iOS Newsstand Tutorial
查看>>
某互金数据分析笔试题学习
查看>>
734. [网络流24题] 方格取数问题 二分图点权最大独立集/最小割/最大流
查看>>
AngularJS之watch
查看>>
89C51单片机定时器控制的流水灯
查看>>
2808 SCI 发送字节
查看>>
beautiful sentences
查看>>
第五周软件工程作业-每周例行报告
查看>>
关于input type=file 限制文件上传类型
查看>>